<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        window.onload = function () {
            function loadImg2(src) {
                return new Promise((resolve, reject) => {
                    let img = document.createElement('img');
                    img.onload = function () {
                        resolve(img);
                    };
                    img.onerror = function (e) {
                        // 返回错误信息
                        reject("catch 错误 加载失败")
                    }
                    img.src = src;
                })
            }
            var src1 = '../../../../images/award1.jpg';
            var src2 = '../../../../images/Logo.png';
            var result1 = loadImg2(src1);
            var result2 = loadImg2(src2);

            // 多个串联；可以在同时执行多个promise 
            // 通过then 返回下一个的promise函数或参数
            // 在下一个then中接受上一个返回的promise函数或参数

            // 在result1 在第一个then中加载完了图片后 返回了img  那么在下一个then中可以接受到这个参数，
            // 在第二个then中没有返回任何参数或函数  那么在下一个then是不能接收到的,再使用它就会报错，除非用不到任何参数
            result1.then(function (img) {
                console.log("第一张图片加载完成,宽度是 ：" + img.width);
                return img.width;
            }).then(function (width) {
                console.log("接收第一张图片传来的宽度是 ：" + width);
            }).then(function (width) {
                console.log("第三个then ：" + width); //undefined
            }).catch(function (ex) {
                console.log("捕获错误：" + ex); 
            })

            // 同理 在then中返回一个新的promise 函数对象 在下一个then中接收的是新的promise返回的结果
            result2.then(function (img) {
                console.log("第二张图片加载完成,宽度是 ：" + img.width);
                return result1;
            }).then(function (img) {
                console.log("第一张图片加载完成,宽度是 ：" + img.width);
            }).then(function () {
                console.log("第三个then没有接收任何参数正常执行");
            }).catch(function (ex) {
                console.log("捕获错误：" + ex);
            })

            // 如果想要在下一个then的回调中获取上个promise中的结果，上个promise中必须要返回结果。
            // 在一个失败操作（即一个 catch）之后可以继续使用链式操作，
            // 即使链式中的一个动作失败之后还能有助于新的动作继续完成
        }
    </script>
</body>

</html>